<template>
  <el-card :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
      <el-form-item :label="$t('msgRecord.title')" prop="title">
        <el-input v-model="dataForm.title" :placeholder="$t('msgRecord.title')"></el-input>
      </el-form-item>
      <el-form-item :label="$t('msgRecord.content')" prop="content">
        <el-input v-model="dataForm.content" :placeholder="$t('msgRecord.content')" type="textarea" :autosize="{ minRows: 3, maxRows: 4}"></el-input>
      </el-form-item>
      <!-- <el-form-item :label="$t('msgRecord.protectedFlag')" prop="protectedFlag">
        <el-switch v-model="dataForm.protectedFlag" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item> -->
      <el-form-item :label="$t('msgRecord.type')" prop="type">
        <el-select v-model="dataForm.type" :placeholder="$t('msgRecord.type')">
          <el-option v-for="item in this.baseData.typeList" :key="item.val" :label="item.label" :value="item.val"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('msgRecord.level')" prop="level">
        <el-select v-model="dataForm.level" :placeholder="$t('msgRecord.level')">
          <el-option v-for="level in this.baseData.levelList" :key="level.val" :label="level.label" :value="level.val"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('msgRecord.url')" prop="url">
        <el-input v-model="dataForm.url" :placeholder="$t('msgRecord.url')"></el-input>
      </el-form-item>
      <!-- <el-form-item :label="$t('msgRecord.receiverType')" prop="receiverType">
        <el-select v-model="dataForm.receiverType" :placeholder="$t('msgRecord.receiverType')">
          <el-option v-for="receiverType in this.baseData.receiverTypeList" :key="receiverType.val" :label="receiverType.label"
            :value="receiverType.val"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item :label="$t('msgRecord.receiverIds')" prop="receiverIds">
        <!-- <el-input v-model="dataForm.receiverIds" :placeholder="$t('msgRecord.receiverIdsTips')"></el-input> -->
        <el-input v-model="dataForm.receiverIds" :placeholder="$t('msgRecord.receiverIdsTips')" @focus="show">
          <!-- <el-button slot="append" icon="el-icon-search" @click.stop="show"></el-button> -->
        </el-input>
        <uni-user-select v-if="dialogVisible" ref="userSelect" @backFun="backFun" :initDataForm="{flag:1}" :multiple="true"></uni-user-select>
      </el-form-item>
      <el-form-item :label="$t('msgRecord.sender')" prop="sender">
        <el-input v-model="dataForm.sender" :placeholder="$t('msgRecord.sender')"></el-input>
      </el-form-item>
      <!-- <el-form-item :label="$t('msgRecord.sendDate')" prop="sendDate">
        <el-date-picker v-model="dataForm.sendDate" type="datetime" :placeholder="$t('msgRecord.sendDateTips')"
          default-time="12:00:00"></el-date-picker>
      </el-form-item>
      <el-form-item :label="$t('msgRecord.validDate')" prop="validDate">
        <el-date-picker v-model="dataForm.validDate" type="datetime" :placeholder="$t('msgRecord.validDateTips')"
          default-time="12:00:00"></el-date-picker>
      </el-form-item> -->
      <el-form-item :label="$t('msgRecord.remark')" prop="remark">
        <el-input v-model="dataForm.remark" :placeholder="$t('msgRecord.remark')" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
      </el-form-item>
      <el-form-item :label="$t('msgRecord.bizId')" prop="bizId">
        <el-input v-model="dataForm.bizId" :placeholder="$t('msgRecord.bizId')"></el-input>
      </el-form-item>
      <el-form-item :label="$t('msgRecord.bizType')" prop="bizType">
        <el-input v-model="dataForm.bizType" :placeholder="$t('msgRecord.bizType')"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button v-show="false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import debounce from 'lodash/debounce'
import staticData from './msgRecord.json'
import moment from 'moment'
export default {
  data () {
    return {
      dialogVisible: false,
      visible: false,
      baseData: {
        ...staticData,
        typeList: this.$getDictList(staticData.CODE_TYPE, true)
      },
      dataForm: {
        id: '',
        title: '',
        content: '',
        // protectedFlag: 0,
        type: '',
        level: '',
        url: '',
        // receiverType: '',
        receiverIds: '',
        sender: '',
        // sendDate: '',
        // validDate: '',
        remark: '',
        creator: '',
        createDate: '',
        updater: '',
        updateDate: '',
        shouldNums: '',
        readNums: '',
        bizId: null,
        bizType: ''
      }
    }
  },
  created () {
    this.dataForm.type = this.baseData.typeList[0].val
    this.dataForm.level = this.baseData.levelList[0].val
    this.init()
  },
  computed: {
    dataRule () {
      return {
        title: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ],
        content: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ],
        // protectedFlag: [
        //   {
        //     required: true,
        //     message: this.$t('validate.required'),
        //     trigger: 'blur'
        //   }
        // ],
        type: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ],
        level: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ],
        receiverType: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ],
        receiverIds: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ],
        sender: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    show () {
      this.dialogVisible = true
      // 等待DOM完成更新 v-if 渲染后执行
      this.$nextTick(() => {
        this.$refs.userSelect.defaultValues = this.selData
        this.$refs.userSelect.init()
      })
    },
    backFun (data) {
      this.selData = data
      let ids = data.map(function (c) {
        return c.id
      })
      this.dataForm.receiverIds = ids.join(',')
    },
    /**
    * 格式化输出日期
    * @param {*} d 日期时间
    * @param {*} format 格式默认YYYY-MM-DD HH:mm:ss
    */
    formatDate (d, format = 'YYYY-MM-DD HH:mm:ss') {
      if (!d) return null
      return moment(d).format(format)
    },
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.getInfo()
        }
      })
    },
    // 获取信息
    getInfo () {
      this.$http
        .get(`/msg/msgRecord/${this.dataForm.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data
          }
        })
        .catch(() => { })
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs['dataForm'].validate(valid => {
          if (!valid) {
            return false
          }
          let data = {
            ...this.dataForm,
            sendDate: this.formatDate(this.dataForm.sendDate),
            validDate: this.formatDate(this.dataForm.validDate)
          }
          this.$http.post('/msg/msgRecord', data)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg)
              }
              this.$message({
                message: this.$t('prompt.success'),
                type: 'success'
              })
            })
            .catch(() => { })
        })
      },
      1000,
      { leading: true, trailing: false }
    )
  }
}
</script>
